<template>
  <div class="app-container">
    <div class="formCenter">
      <div class="formHeader">
        <el-select size="medium" v-model="templateValue" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </div>
      <div class="dailytable">
        <dispatchDaily v-if="templateValue == '调度'" />
        <receiveDaily v-if="templateValue == '收货'" />
        <oddGoodlist v-if="templateValue == '零货上架'" />
        <wholesoldDaily v-if="templateValue == '整件下架'" />
        <wholeshelfDaily v-if="templateValue == '整件上架'" />
        <exReviewDaily v-if="templateValue == '外复核'" />
        <jdwarehouseDaily v-if="templateValue == '京东仓'" />
        <medicineDaily v-if="templateValue == '中药仓'" />
        <qualitycheckDaily v-if="templateValue == '质量部验收报告'" />
        <qualityInspectDaily v-if="templateValue == '质量部入库'" />
        <!-- <serviceProfitDaily v-if="templateValue == '11'" />
        <serviceRedDaily v-if="templateValue == '12'" /> -->
      </div>
    </div>
  </div>
</template>

<script>
import { dailyExport } from "@/api/system/daily";
import receiveDaily from "@/components/daily/receiveDaily";
import dispatchDaily from "@/components/daily/dispatchDaily";
import oddGoodlist from "@/components/daily/oddGoodlist";
import wholesoldDaily from "@/components/daily/wholesoldDaily";
import wholeshelfDaily from "@/components/daily/wholeshelfDaily";
import exReviewDaily from "@/components/daily/exReviewDaily";
import jdwarehouseDaily from "@/components/daily/jdwarehouseDaily";
import medicineDaily from "@/components/daily/medicineDaily";
import qualitycheckDaily from "@/components/daily/qualitycheckDaily";
import qualityInspectDaily from "@/components/daily/qualityInspectDaily";
// import serviceProfitDaily from "@/components/daily/serviceProfitDaily";
// import serviceRedDaily from "@/components/daily/serviceRedDaily";
export default {
  components: {
    receiveDaily,
    dispatchDaily,
    oddGoodlist,
    wholesoldDaily,
    wholeshelfDaily,
    exReviewDaily,
    jdwarehouseDaily,
    medicineDaily,
    qualitycheckDaily,
    qualityInspectDaily,
    // serviceProfitDaily,
    // serviceRedDaily
  },
  data() {
    return {
      // 陕西海通零货条目数
      ids: null,
      systemTime: "",
      templateValue: "调度",
      dateRange: [
        // new Date(new Date().setDate(new Date().getDate() - 1))
        //   .toISOString()
        //   .split("T")[0],
        // new Date(new Date().setDate(new Date().getDate() - 1))
        //   .toISOString()
        //   .split("T")[0],
        // new Date().toISOString().split("T")[0],
        // new Date().toISOString().split("T")[0],
      ],
      queryParams: {},
      options: [
        {
          value: "调度",
          label: "调度",
        },
        {
          value: "收货",
          label: "收货",
        },
        {
          value: "零货上架",
          label: "零货上架",
        },
        {
          value: "整件下架",
          label: "整件下架",
        },
        {
          value: "整件上架",
          label: "整件上架",
        },
        {
          value: "外复核",
          label: "外复核",
        },
        {
          value: "京东仓",
          label: "京东仓",
        },
        {
          value: "中药仓",
          label: "中药仓",
        },
        {
          value: "质量部验收报告",
          label: "质管部验收报告",
        },
        {
          value: "质量部入库",
          label: "质管部入库",
        },
        // {
        //   value: "11",
        //   label: "客服盘盈亏",
        // },
        // {
        //   value: "12",
        //   label: "客服冲红",
        // },
      ],
    };
  },
  mounted() {
    // 创建一个 Date 对象
    const currentDate = new Date();
    // 获取当前年份
    const year = currentDate.getFullYear();
    // 获取当前月份（注意：月份是从 0 开始计数的，所以需要加 1）
    const month = currentDate.getMonth() + 1;
    // 获取当前日期
    const day = currentDate.getDate();
    // 打印年月日
    this.systemTime = `${year}年${month}月${day}日`;
  },
  beforeDestroy() {},
  methods: {
    handleExport() {
      let exporturl = "";
      if (this.templateValue == "调度") {
        exporturl = "/system/daily/export";
      } else if (this.templateValue == "收货") {
        exporturl = "/system/shz/export";
      } else if (this.templateValue == "零货上架") {
        exporturl = "/system/lhsj/export";
      } else if (this.templateValue == "整件下架") {
        exporturl = "/system/zjxj/export";
      } else if (this.templateValue == "整件上架") {
        exporturl = "/system/zjsj/export";
      } else if (this.templateValue == "外复核") {
        exporturl = "/system/wfh/export";
      } else if (this.templateValue == "京东仓") {
        exporturl = "/system/jdc/export";
      } else if (this.templateValue == "中药仓") {
        exporturl = "/system/zyc/export";
      } else if (this.templateValue == "质量部验收报告") {
        exporturl = "/system/ys/export";
      } else if (this.templateValue == "质量部入库") {
        exporturl = "/system/rk/export";
      }
      this.download(
        exporturl,
        { ...this.addDateRange(this.queryParams, this.dateRange) },
        `${this.templateValue}_${new Date().toISOString().split("T")[0]}.xlsx`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
  background: #ffffff;

  .formCenter {
    // height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    .formHeader {
      display: flex;
      ::v-deep .el-select {
        width: 50%;
        margin-right: 30px;
      }
      .el-range-editor.el-input__inner {
        width: 350px !important;
        margin-right: 30px;
      }
    }
    .dailytable {
      width: 90%;
      text-align: center;
      margin-top: 0px;
      ::v-deep .el-table__footer-wrapper tbody td.el-table__cell {
        background: rgb(117, 213, 97);
        font-size: 16px;
      }
    }
  }
}
</style>